<!-- This example requires Tailwind CSS v2.0+ -->
<template>
    <div class="h-screen w-full py-10 text-center">
        <div class="hidden sm:inline-grid relative md:w-1/2 inset-x-0 top-24/50 text-center justify-items-center gap-6">
            <div>
                <img class="inline-block h-14 w-14 rounded-full" src="https://media.inyaa.cn/99db72d3abaaef4beece7e9f94b3623.jpg" />
            </div>
            <div class="container mx-auto w-7/12 mt-6 bg-white bg-opacity-80 rounded-full">
                <p class="p-4">你若安好，便是晴天</p>
            </div>
            <div class="flex items-center">
                <div class="inline-block relative h-10 w-10 bg-white bg-opacity-80 rounded-full">
                    <img class="m-auto mt-2 h-6 w-6" src="https://cdn.jsdelivr.net/gh/Fuukei/Public_Repository@latest/vision/display_icon/muh2/pre.png" />
                </div>
                <div class="inline-block relative h-10 w-10 bg-white bg-opacity-80 rounded-full">
                    <img class="m-auto mt-2 h-6 w-6" src="https://cdn.jsdelivr.net/gh/Fuukei/Public_Repository@latest/vision/display_icon/fluent_design/qq.png" />
                </div>
                <div class="inline-block relative h-10 w-10 bg-white bg-opacity-80 rounded-full">
                    <img class="m-auto mt-2 h-6 w-6"  src="https://cdn.jsdelivr.net/gh/Fuukei/Public_Repository@latest/vision/display_icon/muh2/next.png" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
</script>
